<!--
 * @Author: boyyang
 * @Date: 2022-02-01 11:29:16
 * @LastEditTime: 2022-03-18 22:00:47
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\customUpload\index.vue
-->

<template>
    <div :class="['upload', { 'upload-border': props.isBorder }]" @click="uploadClick">
        <slot></slot>
        <input
            type="file"
            id="upload"
            class="inner-upload"
            ref="upload"
            :accept="props.fileType"
            :multiple="multiple"
            @change="fileChange"
        />
    </div>
</template>

<script lang="ts" setup>
import { useMessage } from '@/components/message'
import { getFileBlob } from '@/utils/getFileBlob'

export interface IUploadRes {
    tempUrl?: string | string[];
    file?: File | Array<File>;
}

interface IUploadProps {
    size?: number; //头像大小 单位px
    fileSize?: number | string; //文件大小 单位MB
    fileType?: string; //上传文件类型 默认所有文件
    isBorder?: boolean; //是否有border 默认true
    borderWidth?: number; //border 宽度 2px
    borderColor?: string; //border 颜色
    headers?: object; //自动上传header
    imgUrl?: string; //头像访问链接
    multiple?: boolean; //是否可以多选
}

interface IUploadEmits {
    (e: 'onChange', fileMes: IUploadRes): void
}

const message = useMessage()

const props = withDefaults(defineProps<IUploadProps>(), {
    // size: 100,
    fileSize: 3,
    fileType: '*',
    isBorder: false,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    imgUrl: '',
    multiple: false
})

const emits = defineEmits<IUploadEmits>()

// input
const upload = ref<any>()

// 图片信息
const imgMes = reactive<IUploadRes>({})

imgMes.tempUrl = props.imgUrl

// 点击盒子
const uploadClick = () => {
    upload.value.click()
}

// 文件发生变化
const fileChange = (e: any) => {
    if (props.multiple) {
        const files = e.target.files as Array<File>
        const len = files.length
        const urls: string[] = []
        for (let i = 0; i < len; i++) {
            urls.push(getFileBlob(files[i]))
        }
        imgMes.tempUrl = urls
        imgMes.file = files
        // 将文件信息返回给外层组件函数
        emits('onChange', imgMes)
    } else {
        const file = e.target.files[0] as File
        const url = getFileBlob(file)
        let size = file.size / 1024 / 1024
        if (size > props.fileSize) {
            message.error(`上传文件不能大于${props.fileSize}M`)
            return
        }
        imgMes.tempUrl = url
        imgMes.file = file
        // 将文件信息返回给外层组件函数
        emits('onChange', imgMes)
    }
}

</script>

<style scoped lang="scss">
.upload {
    box-sizing: border-box;
    width: calc(v-bind("props.size") * 1px);
    height: calc(v-bind("props.size") * 1px);
    // background-color: rgb(68, 152, 185);
    border-radius: 100%;
    // overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    img {
        height: 100%;
        transform: scale(1.2);
    }

    .inner-upload {
        display: none;
    }
}

.upload-border {
    border: calc(v-bind("props.borderWidth") * 1px) solid
        v-bind("props.borderColor");
}
</style>

